<!--
@Description:功能描述
@Author:zqy
@Date:2023-04-13 16:41:57
@Last Modified by:zqy
@Last Modified time:2023-04-13 16:41:57
-->
<template>
  <div class="slide" @touchstart="touchStartHandle" @touchend="touchEndHandle">
    <slot></slot>
  </div>
</template>
<script lang="ts">
  import { reactive, defineComponent } from 'vue'
  export default defineComponent({
    name: 'Slide',
    emits: ['left', 'right'],
    setup(props, ctx) {
      const data = reactive({
        clientX: null,
        clientY: null
      })
      const touchStartHandle = (e: any) => {
        if (e.changedTouches.length <= 0) return
        data.clientX = e.changedTouches[0].clientX
        data.clientY = e.changedTouches[0].clientY
      }
      const touchEndHandle = (e: any) => {
        if (e.changedTouches.length <= 0 || data.clientX === null || data.clientY === null) return
        const { clientX, clientY } = e.changedTouches[0]
        if (Math.abs(data.clientY - clientY) > 30) return
        if (Math.abs(data.clientX - clientX) < 100) return
        if (clientX - data.clientX > 0) {
          ctx.emit('right')
        } else if (clientX - data.clientX < 0) {
          ctx.emit('left')
        }
        data.clientX = null
      }
      return {
        touchStartHandle,
        touchEndHandle
      }
    }
  })
</script>
<style lang="less" scoped></style>
